<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章新增</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <link rel="stylesheet" href="./css/main.css" />
    <link rel="stylesheet" href="./libs/layui/css/layui.css" />
    <!-- <link
      rel="stylesheet"
      href="./libs/layui/css/modules/layer/default/layer.css"
    /> -->
    <!-- jq -->
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="./libs/tinymce_5.5.1/tinymce.min.js"></script>
    <script src="./libs/layui/layui.js"></script>
    <script src="./libs/art-template/template-web.js"></script>

    <!-- <script src="./libs/layui/lay/modules/layer.js"></script> -->
    <script src="./js/jqconfig.js"></script>
    <script id="art_category" type="text/html">
      {{each data}}
      <option value="{{$value.id}}">{{$value.name}}</option>
      {{/each}}
    </script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">文章新增</div>
      <div class="container-fluid common_con">
        <form class="form-horizontal article_form" id="form">
          <div class="form-group">
            <label for="inputTitle" class="col-sm-2 control-label"
              >文章标题：</label
            >
            <div class="col-sm-10">
              <input
                type="text"
                name="title"
                required
                class="form-control title"
                id="inputTitle"
                placeholder="文章标题文字"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCover" class="col-sm-2 control-label"
              >文章封面：</label
            >
            <div class="col-sm-10">
              <img id="coverimg" src="./images/2.jpg" class="article_cover" />
              <input
                name="cover"
                type="file"
                id="inputCover"
                onchange="changeCoverImage()"
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputCategory" class="col-sm-2 control-label"
              >文章类别：</label
            >
            <div class="col-sm-4">
              <select
                id="category"
                class="form-control category"
                name="categoryId"
              >
                <option value="">请选择文章类别</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">发布时间：</label>
            <div class="col-sm-4">
              <input
                id="articleDate"
                name="date"
                class="jeinput form-control title"
                type="text"
                placeholder="请选择发布日期"
                readonly
              />
            </div>
          </div>
          <div class="form-group">
            <label for="inputEmail3" class="col-sm-2 control-label"
              >文章内容：</label
            >
            <div class="col-sm-10">
              <!-- 富文本编辑区域 -->
              <textarea id="articleContent"></textarea>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button
                type="button"
                class="btn btn-success btn-edit"
                onclick="saveArticle(state='已发布')"
              >
                发布
              </button>
              <button
                type="button"
                class="btn btn-default btn-draft"
                onclick="saveArticle(state='')"
              >
                存为草稿
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <script>
      var laydate;
      layui.use("laydate", function () {
        laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
          elem: "#articleDate", //指定元素
          type: "datetime",
        });
        //文章类别
        getCataList();
        //富文本
        tinymce.init({
          selector: "#articleContent",
          language: "zh_CN",
        });
      });

      //文章图片的回选功能
      function changeCoverImage() {
        const file = document.querySelector("#inputCover").files[0];
        //获取图片本地路径
        const url = URL.createObjectURL(file);
        // console.log(url);
        // 将url设置给img的src属性，显示图片
        $("#coverimg").prop("src", url);
      }
      //文章类别
      function getCataList() {
        $.ajax({
          type: "get",
          url: "/admin/category/list",
          success: (res) => {
            $("#category").append(template("art_category", res));
          },
        });
      }

      //
      function saveArticle(state) {
        // 序列化表单(快速获取表单值)
        let title = $("#inputTitle").val().trim();
        let file = document.querySelector("#inputCover").files[0];
        let categoryId = $("#category").val();
        let date = $("#articleDate").val();
        //富文本值的获取
        let content = tinyMCE.editors["articleContent"].getContent();

        console.log(title, file, categoryId, date, content, state);

        let fd = new FormData(); // 表单对象
        fd.append("title", title);
        fd.append("cover", file);
        fd.append("categoryId", categoryId);
        fd.append("date", date);
        fd.append("content", content);
        fd.append("state", state);

        $.ajax({
          type: "POST",
          url: "/admin/article/publish",
          data: fd,
          processData: false,
          contentType: false,
          success: function (res) {
            console.log(res);
            location.href = "./article_list.html";
          },
          error: function (res) {
            console.info("error: " + result);
          },
        });
      }
    </script>
  </body>
</html>
